

@inherits NantCom.NancyBlack.Modules.ContentSystem.NancyBlackRazorViewBase
@{
    Layout = "SuperAdmin/_superadmin.cshtml";
}
@section Title
{
    Administration - site
}
<div ng-module="siteModule"
     ng-controller="siteController as ctrl">

    <h1 class="page-header">
        Manage site
        <i class="fa fa-spinner fa-spin" ng-show="isBusy"></i>
    </h1>

    <div style="margin-bottom: 30px">
        This page helps you manage site in this system.

    </div>

    <div class="alert alert-danger">
        This page was auto-generated by NancyBlack Engine on: 12/19/2014 3:09:54 PM <br />
        If you generate this page again, all custom changes will be lost.
        <p class="margin-top: 5px">

            <a class="btn btn-lg btn-danger" href="@(this.RenderContext.Context.Request.Path)?regenerate=true">Generate Again</a>
        </p>
    </div>

    <div id="siteForm"
         class="modal fade" data-keyboard="false" data-backdrop="static">

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button"
                            class="close"
                            data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <button type="button"
                            ng-hide="object.id == null"
                            ng-click="ctrl.delete(object)"
                            class="close text-warning"
                            style="margin-right: 10px">
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                    <h2 class="modal-title">
                        <span ng-show="object.id == null">Create</span>
                        <span ng-show="object.id != null">Edit</span>
                        site
                    </h2>
                </div>
                <div class="modal-body">

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#general" role="tab" data-toggle="tab">General</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="general">
                            <form role="form">

                                        <div class="dropdown form-group">

                                            <label class="control-label" for="start">RegistrationDate</label>

                                            <p class="input-group">
                                                <input type="text"
                                                       class="form-control"
                                                       datepicker-popup="dd MMMM yyyy, HH:mm"
                                                       ng-model="object.RegistrationDate"
                                                       is-open="datepickeropen['RegistrationDate']"
                                                       close-text="Close" />
                                                <span class="input-group-btn">
                                                    <button type="button"
                                                            class="btn btn-default"
                                                            ng-click="ctrl.opendatepicker($event, 'RegistrationDate')">
                                                        <i class="glyphicon glyphicon-calendar"></i>
                                                    </button>
                                                </span>
                                            </p>

                                        </div>
                                        <div class="form-group">
                                            <label class="control-label" for="HostName">HostName</label>
                                            <input type="text"
                                                   class="form-control"
                                                   name="HostName"
                                                   ng-model="object.HostName"
                                                   placeholder="HostName" />
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label" for="Alias">Alias</label>
                                            <input type="text"
                                                   class="form-control"
                                                   name="Alias"
                                                   ng-model="object.Alias"
                                                   placeholder="Alias" />
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label" for="AttachmentUrl">AttachmentUrl</label>

                                            <img class="img-responsive"
                                                 ng-src="{{object.AttachmentUrl}}?t={{timestamp}}" />

                                            <label class="control-label" style="margin-top: 10px">Replacement Image:</label>

                                            <div class="filedrop" data-maxfile="1" data-imageonly="true">
                                                <div ng-hide="files == null || files.length == 0 || files[0].type.indexOf( 'image' ) < 0" style="text-align:center">
                                                    <img ng-src="{{files[0].data}}" class="img-responsive" /><br />

                                                    {{files[0].size}} bytes
                                                </div>
                                                <p ng-show="files[0].type.indexOf( 'image' ) < 0">
                                                    You have dropped file of type: <b>{{files[0].type}}</b> <br />
                                                    Only images are supported.
                                                </p>
                                                <p ng-show="files == null || files.length == 0">
                                                    Drop image file here to replace the image.
                                                </p>
                                            </div>

                                        </div>
                            </form>
                        </div>
                    </div>

                    <div class="alert alert-danger alert-dismissible" ng-show="error != null">
                        {{error.message}}
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-success btn-lg"
                            data-target="#siteForm"
                            ng-disabled="isBusy"
                            ng-click="ctrl.save(object)">

                        <span>
                            <span class="busycenter" ng-show="isBusy">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span ng-show="object.id == null">Create</span>
                            <span ng-show="object.id != null">Save</span>
                        </span>
                    </button>
                </div>
            </div>
        </div>

    </div>


    <table id="siteTable"
           class="table table-striped table-hover"
           style="width: 100%">
        <thead>
            <tr>
                        <th>RegistrationDate</th>
                        <th>HostName</th>
                        <th>Alias</th>
                        <th>AttachmentUrl</th>
                        <th>__createdAt</th>
                        <th>__updatedAt</th>
                <th class="commandColumn"></th>
            </tr>

        </thead>
        <tr ng-repeat="item in list">
                    <td>{{item.RegistrationDate | date:'dd MMMM yyyy, HH:mm' }}</td>
                    <td>{{item.HostName }}</td>
                    <td>{{item.Alias }}</td>
                    <td>
                        <img class="img-responsive"
                             ng-src="{{item.AttachmentUrl}}" />
                    </td>
                    <td>{{item.__createdAt | date:'dd MMMM yyyy, HH:mm' }}</td>
                    <td>{{item.__updatedAt | date:'dd MMMM yyyy, HH:mm' }}</td>
            <td style="white-space: nowrap">

                <button class="btn btn-primary"
                        ng-click="ctrl.view(item)">
                    <span class="glyphicon glyphicon-pencil"></span>
                </button>
            </td>
        </tr>



    </table>

    <div>
        <button class="btn btn-success"
                ng-click="ctrl.create()">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <span>Create new site</span>
        </button>
    </div>

    <div class="alert alert-danger"
         ng-show="error">
        {{error.message}}
    </div>
</div>



@section Scripts
{

<script>

    (function () {

        var module = angular.module('siteModule', ['ui.bootstrap', 'ncb']);

        module.factory("siteDialog", ['ncbDialog', function (ncbDialog) {

            return function () {
                return new ncbDialog('#siteForm');
            };

        }]);

        module.controller("siteController", function ($scope, $rootScope, zumo, ncbOps, ncbLookup, siteDialog) {

            var table = zumo.getTable("site");
            var ncbLookup = new ncbLookup($scope, zumo);

            var standardOperations = new ncbOps($scope, table, '#siteForm');
            standardOperations.startScope();

            this.delete = standardOperations.del;
            this.save = standardOperations.save;
            this.refresh = standardOperations.list;

            this.getLookup = ncbLookup.lookup;

            this.refresh();

            this.view = function (object) {
                $scope.object = object;

                var dialog = new siteDialog();
                dialog.show(object);
            }

            this.create = function () {
                $scope.object = {};

                var dialog = new siteDialog();
                dialog.show($scope.object);
            }

            $scope.datepickeropen = {};
            this.opendatepicker = function ($event, target) {
                $event.preventDefault();
                $event.stopPropagation();

                $scope.datepickeropen[target] = !$scope.datepickeropen[target];
            }

        });

    })();

</script>

}